<template>
  <div class="maincontent">
    <div class="div1">
      <div 
        v-for="(item, index) in firstline" 
        :key="index">
        <p>
          <span>{{ item.label }}：</span>
          <input 
            v-if="item.unit!=''"
            :value="item.value+item.unit" 
            :disabled="item.unit!=''" 
            type="text">
          <input 
            v-else 
            v-model="item.value" 
            type="text">
        </p>
        <div  
          v-if="index==6" 
          id="myChart" />
      </div>

      
    </div>
    <div class="div1">
      <div 
        v-for="(item, index) in secondline" 
        :key="index">
        <p>
          <span>{{ item.label }}：</span>
          <input 
            v-if="item.unit!=''"
            :value="item.value+item.unit" 
            :disabled="item.unit!=''" 
            type="text">
          <input 
            v-else 
            v-model="item.value" 
            type="text">
        </p>
        <div  
          v-if="index==6" 
          id="myChart2" />
      </div>
    </div>
    <div class="div1">
      <div 
        v-for="(item, index) in thirdline" 
        :key="index">
        <p>
          <span>{{ item.label }}：</span>
          <input 
            v-if="item.unit!=''"
            :value="item.value+item.unit" 
            :disabled="item.unit!=''" 
            type="text">
          <input 
            v-else 
            v-model="item.value" 
            type="text">
        </p>
        <div 
          v-if="index==6"
          id="SlideRuler" 
          style="border:1px solid #aaa;margin:90px 0;border-radius:5px">
          <span class="biaochi">{{ biaochival }}</span>
        </div>
      </div>
    </div>
    <div class="div1">
      <div style="display:flex;justify-content:space-between">
        <div style="height:510px;width:40%">
          <div 
            id="main" 
            style="width: 100%; height: 100%;"/>
        </div>
        <div style="width:60%">
          <div style="border:1px solid #ccc;padding:0 10px">
            <div>
              <p>通信口设置</p>
              <p><label><input 
                name="Fruit" 
                type="radio" 
                value="" >10ms数据周期</label></p>
              <p><label><input 
                name="Fruit" 
                type="radio" 
                value="" >1ms数据周期</label></p>
              <p><label><input 
                name="Fruit" 
                type="radio" 
                value="" >2ms数据周期</label></p>
              <p><label><input 
                name="Fruit" 
                type="radio" 
                value="" >5ms数据周期</label></p>

            </div>
            <div >
              <select style="width:80%;margin-left:10%;padding:5px;">
                <option value ="volvo">Volvo</option>
                <option value ="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
              </select>
              <input 
                type="button" 
                style="width:80%;margin-left:10%;padding:5px;margin:10px 10%"
                value="打开串口">
            </div>
          </div>
          <div id="myChart4" />
        </div>
        
      </div>  
      
      <p 
        v-for="(item, index) in fourline" 
        :key="index">
        <span>{{ item.label }}：</span>
        <input 
          v-if="item.unit!=''"
          :value="item.value+item.unit" 
          :disabled="item.unit!=''" 
          type="text">
        <input 
          v-else 
          v-model="item.value" 
          type="text">
      </p>
      
    </div>
  </div>
</template>

<script>
import SlideRuler from 'slide-ruler'
export default {
  components: {
    SlideRuler
  },
  data() {
    return {
      biaochival: '0',
      firstline: [
        {
          label: '时间计数',
          value: '0',
          unit: ''
        },
        {
          label: 'X轴角速度',
          value: '0.000',
          unit: '°/s'
        },
        {
          label: 'X轴加速度',
          value: '0.000',
          unit: 'm/s2'
        },
        {
          label: 'X陀螺漂移',
          value: '0.0',
          unit: '°/h'
        },
        {
          label: '东向速度',
          value: '0.00',
          unit: 'm/s'
        },
        {
          label: '经度',
          value: '0.00000',
          unit: '°'
        },
        {
          label: '横滚角',
          value: '0.00',
          unit: '°'
        },
        {
          label: 'POST_TYPE',
          value: '0',
          unit: ''
        },
        {
          label: 'GPS东速',
          value: '0.00',
          unit: 'm/s'
        },
        {
          label: 'GPS经度',
          value: '0.00000',
          unit: '°'
        },
        {
          label: 'GPS航向',
          value: '0.00',
          unit: '°'
        }
      ],
      secondline: [
        {
          label: '工作模式',
          value: '0',
          unit: ''
        },
        {
          label: 'Y轴角速度',
          value: '0.000',
          unit: '°/s'
        },
        {
          label: 'Y轴加速度',
          value: '0.000',
          unit: 'm/s2'
        },
        {
          label: 'Y陀螺漂移',
          value: '0.0',
          unit: '°/h'
        },
        {
          label: '北向速度',
          value: '0.00',
          unit: 'm/s'
        },
        {
          label: '纬度',
          value: '0.00000',
          unit: '°'
        },
        {
          label: '航向角',
          value: '0.00',
          unit: '°'
        },
        {
          label: 'POST_OK',
          value: '0',
          unit: ''
        },
        {
          label: 'GPS北速',
          value: '0.00',
          unit: 'm/s'
        },
        {
          label: 'GPS纬度',
          value: '0.00000',
          unit: '°'
        }
      ],
      thirdline: [
        {
          label: '自检结果',
          value: '0',
          unit: ''
        },
        {
          label: 'Z轴角速度',
          value: '0.000',
          unit: '°/s'
        },
        {
          label: 'Z轴加速度',
          value: '0.000',
          unit: 'm/s2'
        },
        {
          label: 'Z陀螺漂移',
          value: '0.0',
          unit: '°/h'
        },
        {
          label: '天向速度',
          value: '0.00',
          unit: 'm/s'
        },
        {
          label: '高度',
          value: '0.00',
          unit: 'm'
        },
        {
          label: '俯仰角',
          value: '0.00',
          unit: '°'
        },
        {
          label: 'HEADING_OK',
          value: '0',
          unit: ''
        },
        {
          label: 'GPS天速',
          value: '0.00',
          unit: 'm/s'
        },
        {
          label: 'GPS高度',
          value: '0.00',
          unit: 'm'
        },
        {
          label: 'UTC时间',
          value: '2018-09-10 14:20:14',
          unit: ' '
        }
      ],
      fourline: [
        {
          label: '磁航向',
          value: '0.00',
          unit: '°'
        },
        {
          label: '卫星数',
          value: '0',
          unit: ''
        },
        {
          label: '定位精度',
          value: '0.000',
          unit: ' '
        },
        {
          label: '气压高度',
          value: '0.00',
          unit: 'm'
        }
      ]
    }
  },
  mounted() {
    this.drawLine()
    this._renderSlideRuler()
  },
  methods: {
    _renderSlideRuler() {
      return new SlideRuler({
        el: document.querySelector('#SlideRuler'),
        maxValue: 50,
        minValue: -50,
        currentValue: 8,
        canvasWidth: 250,
        canvasHeight: 80,
        handleValue: this.handleValue,
        precision: 1
      })
    },
    handleValue(value) {
      this.biaochival = value
    },
    drawLine() {
      var data = [80]
      var xMax = 80
      var axisColor = '#fff'

      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      // let myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      let myChart4 = this.$echarts.init(document.getElementById('myChart4'))
      var myChart5 = this.$echarts.init(document.getElementById('main'))
      myChart5.setOption({
        yAxis: [
          {
            min: 0,
            max: 120,
            position: 'left',
            offset: -20,
            axisLabel: {
              show: true,
              formatter: function(value, index) {
                return value - 40
              }
            },
            splitLine: {
              show: false
            },
            splitNumber: 10
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#333'
              }
            }
          }
        ],
        series: [
          {
            name: ' ',
            type: 'bar',
            barWidth: 15,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: function(o) {
                  return o.value - 40 + '℃'
                }
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: {
                      type: 'bar',
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(225,42,84,.3)' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#ffa800' // 100% 处的颜色
                        }
                      ]
                    }
                  }
                }
              }
            ]
          }
        ]
      })
      myChart.setOption({
        series: [
          {
            name: '',
            splitNumber: 10,
            type: 'gauge',
            min: -150,
            max: 150,
            data: [{ value: 0, name: '' }],
            axisLine: {
              lineStyle: {
                width: 10
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            }
          }
        ]
      })
      myChart2.setOption({
        series: [
          {
            name: '',
            type: 'gauge',
            min: 0,
            max: 360,
            startAngle: 0,
            endAngle: 359,
            splitNumber: 8,

            axisLabel: {
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 15
              },
              formatter: function(v) {
                switch (v + '') {
                  case '0':
                    return 'S'
                  case '45':
                    return 'NE'
                  case '90':
                    return 'N'
                  case '135':
                    return 'NW'
                  case '180':
                    return 'W'
                  case '225':
                    return 'SW'
                  case '270':
                    return 'S'
                  case '315':
                    return 'SE'
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 30, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 4
              }
            },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[0.09, '#6e9bf1'], [0.82, '#6e9bf1'], [1, '#6e9bf1']],
                width: 30
              }
            },
            pointer: {
              width: 10,
              length: 45
            },
            detail: {
              show: false
            },
            data: [{ value: 45 }]
          }
        ]
      })
      // myChart3.setOption({
      //   series: [
      //     {
      //       name: '',
      //       type: 'gauge',
      //       startAngle: 0,
      //       endAngle: 1,
      //       splitNumber: 1,
      //       axisLine: {
      //         // 坐标轴线
      //         lineStyle: {
      //           width: 8
      //         }
      //       },
      //       axisLabel: {
      //         formatter: function(v) {
      //           switch (v + '') {
      //             case '0':
      //               return 'N'
      //             case '1':
      //               return 'NE'
      //             case '2':
      //               return 'E'
      //             case '3':
      //               return 'SE'
      //             case '4':
      //               return 'S'
      //             case '5':
      //               return 'SW'
      //             case '6':
      //               return 'W'
      //             case '7':
      //               return 'NW'
      //           }
      //         }
      //       },
      //       data: [{ value: 1 }]
      //     }
      //   ]
      // })
      myChart4.setOption({
        series: [
          {
            name: '',
            type: 'gauge',
            min: 0,
            max: 360,
            startAngle: 0,
            endAngle: 359,
            splitNumber: 8,

            axisLabel: {
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 14
              },
              formatter: function(v) {
                switch (v + '') {
                  case '0':
                    return 'S'
                  case '45':
                    return 'NE'
                  case '90':
                    return 'N'
                  case '135':
                    return 'NW'
                  case '180':
                    return 'W'
                  case '225':
                    return 'SW'
                  case '270':
                    return 'S'
                  case '315':
                    return 'SE'
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 14, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 4
              }
            },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[0.09, '#6e9bf1'], [0.82, '#6e9bf1'], [1, '#6e9bf1']],
                width: 15
              }
            },
            pointer: {
              width: 6,
              length: 30
            },
            detail: {
              show: false
            },
            data: [{ value: 45 }]
          }
        ]
      })
    }
  }
}
</script>

<style>
.maincontent {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}
.div1 p {
  display: flex;
  justify-content: space-between;
  text-align: right;
  height: 30px;
  line-height: 30px;
  margin: 10px 0;
}
.div1 p > span {
  width: 50%;
}
#myChart {
  width: 100%;
  height: 300px;
}
#myChart2 {
  width: 100%;
  height: 300px;
}
#myChart3 {
  width: 100%;
  height: 300px;
}
#myChart4 {
  width: 120%;
  height: 260px;
}
.biaochi {
  display: inline-block;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  font-size: 26px;
  font-weight: bold;
  color: #6e9bf1;
}
</style>
